<template>
		<uni-collapse>
		    <uni-collapse-item title="请选择中介" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
		        <view style="padding: 30rpx;">
					<view v-for="(item,index) in agent" :key="item.userId">
						<view class="rowItem"
						@click="openCheckFrame('确定选择' + item.userNickname + '？', item)">
							<image :src="item.userPhoto" class="leftImg"></image>
							<text class="text" v-text="item.userNickname"></text>
						</view>
					</view>
	            </view>
	        </uni-collapse-item>
			<tui-modal :show="checkFrameShow" title="选择" :content="content" @click="closeCheckframe"></tui-modal>
			<tui-tips ref="toast" position="center" :backgroundColor="tipBc"></tui-tips>
	    </uni-collapse>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import tuiModal from "thorui-uni/lib/thorui/tui-modal/tui-modal"
import tuiButton from "thorui-uni/lib/thorui/tui-button/tui-button"
import tuiTips from 'thorui-uni/lib/thorui/tui-tips/tui-tips'
export default {
    components: {
        tuiModal,
        tuiButton,
        tuiTips
    },
    data () {
        return {
            content: '',
            checkFrameShow: false,
            tipBc: '',
            agent:[],
			selectedAgent: null,
			houseId: -1,
			sellOrRent: ''
        }
    },
    onLoad (option) {
		this.houseId = option.houseId
		this.sellOrRent = option.sellOrRent
        this.getAgent()
    },
    methods: {
        ...mapActions(['setAgentVerifications']),
        back () {
            uni.navigateBack({
                delta: 1
            })
        },
        openCheckFrame (content, agent) {
            this.content = content
            this.checkFrameShow = true
			this.selectedAgent = agent
        },
        closeCheckframe (option) {
            this.checkFrameShow = false
            if (option.index == 1) {
                this.sendMessage({
					userId: this.user.userId,
					fromId: this.user.userId,
					toId: this.selectedAgent.userId,
					verificationStatus: 0,
					houseId: this.houseId,
					houseSellOrRent: this.sellOrRent,
					option: 'add'
				})
            }
        },
        getAgent() {
            this.$axios.post('getAgent')
            .then(res =>{
                this.agent = res.data.agentUser
            })
        },
		sendMessage(msg, callback) {
		    msg.type = 'agentVerification'
		    if (this.mySocket.socketOpen) {
		        this.mySocket.socketTask.send({
		            data: JSON.stringify(msg),
                    success: () => {
						msg.headPhoto = this.selectedAgent.userPhoto
						this.agentVerifications.push(msg)
                    }
		        })
		    } else {
		        // this.mySocket.socketMsgQueue.push(msg)
		    }
		    if (callback) callback()
		}
    },
    computed: {
        ...mapState(['user', 'mySocket', 'agentVerifications'])
    }
}
</script>

<style scoped>

.leftImg {
    height: 45px;
    width: 45px;
    border-radius: 5px;
    margin-right: 20px;
}

.rowItem {
    padding: 10px;
    border: 1px solid #eee;
    background-color: white;
    display: flex;
}

.text {
    line-height: 45px;
}

.touchColor {
    background-color: rgb(199, 199, 199);
}

.listOption {
	display: inline-block;
	padding: 5rpx 20rpx;
	font-size: 40rpx;
	border-radius: 15rpx;
}

.bgWhite {
	background-color: white;
}
</style>